<template>
    <el-dialog :title="tille" v-model="isShow" width="35%" @close="closeHandler">
      <el-form
        :rules="formRules"
        :model="formData"
        ref="formRef"
        label-width="80px"
        :inline="false"
      >
        <el-form-item label="分类名称" prop="catename">
          <el-input v-model="formData.catename"></el-input>
        </el-form-item>
        <br />
        <el-row justify="end">
          <el-form-item>
            <el-button @click="isShow = false">取消</el-button>
            <el-button @click="onSubmit" type="primary">确定</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-dialog>
  </template>
  
  <script setup>
  import { ref } from "vue";
  import { ElMessage } from "element-plus";
  import { addCateList, editCateList, getCateInfo } from "@/api/content";
  const isShow = ref(false);
  const formRef = ref();
  const formData = ref({
    catename: "",
  });
  
  const emit = defineEmits(["updateList"]);
  const formRules = {
    catename: [{ required: true, message: "请输入分类", trigger: "blur" }],
  };
  
  // 弹窗关闭
  const closeHandler = async () => {
    // Object.assign(formData.value, { catename: "" }, { id: "" });
    formData.value = { catename: "" };
    await formRef.value.resetFields();
  };
  //提交
  const onSubmit = async () => {
    await formRef.value.validate();
    formData.value.id
      ? await editCateList(formData.value)
      : await addCateList(formData.value);
    isShow.value = false;
    ElMessage.success("操作成功");
    emit("updateList");
  };
  //回显
  const replyData = async (id) => {
    const res = await getCateInfo(id);
    Object.assign(formData.value, res.data);
    isShow.value = true;
  };
  
  const tille = computed(() => {
    return formData.value.id ? "修改分类" : "新增分类";
  });
  defineExpose({
    isShow,
    replyData,
  });
  </script>
  
  <style lang="scss" scoped></style>
  